<template>
  <div id="new_diy">
    <div class="HomeWarp">
      <img src="../assets/images/carImg/homeBg.jpg" class="homeBgstyle">
      <div class="contBox">
        <div class="contTop">
          <img src="../assets/images/carImg/homeBg.jpg" class="homeBgstyle">
          <div class="contTopCont">
            <!-- <div class="positionBox">
              <div class="positionText" @click="selectCity">{{address}}<img src="../assets/images/carImg/positionIcon.png" class="positionIcon"/></div>
            </div> -->
            <div class="search_box">
              <ul class="search">
                <li class="left" @click="tolocation">
                  <span>{{ address || "全国" }}</span>
                  <i class="iconfont icon-member-bottom"></i>
                </li>
              </ul>
            </div>
            <div class="searchBox">
              <div class="searchStyle">
                <img src="../assets/images/carImg/searchBg.png" class="searchBg" />
                <div class="searchCont">
                  <img src="../assets/images/carImg/searchIcon.png" class="searchIcon" />
                  <div class="searchInputBox">
                    <van-search v-model="search.keyword" placeholder="请输入搜索关键词" @search="keywordsearch"
                      class="searchInput" />
                  </div>
                  <div class="searchBtnBox" @click="searchVin">
                    <img src="../assets/images/carImg/saoyisao1.png" class="saoyisao" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <van-pull-refresh @refresh="loadTop" v-model="isLoading">
          <div class="cont" :class="[fun.isIphoneX() ? 'iphoneXStyle' : '']" ref="cont">
            <div class="addCarBox">
              <img src="../assets/images/carImg/addcarbg.png" class="addcarbg" />
              <div class="addcarCont">
                <div v-if="!selectCarData" class="addcarContL">
                  <div class="addcarContLText1">
                    添加爱车，立享专属车主福利
                  </div>
                  <div class="addcarContLText2">
                    <div class="addcarContLText2-item"><img src="../assets/images/carImg/addcaricon.png"
                        class="addcaricon" />车型专属保养</div>
                    <div class="addcarContLText2-item"><img src="../assets/images/carImg/addcaricon.png"
                        class="addcaricon" />车况智能监测</div>
                    <div class="addcarContLText2-item"><img src="../assets/images/carImg/addcaricon.png"
                        class="addcaricon" />违规查询</div>
                  </div>
                </div>
                <div v-if="selectCarData" class="addcarContL">
                  <div class="addcarContLText1">
                    {{ selectCarData.brand_name }} {{ selectCarData.series_name }}
                  </div>
                  <div class="addcarContLText2">
                    <div class="addcarContLText2-item" style="color: #666;">{{ selectCarData.nf }}款 {{ selectCarData.pl
                      }}
                      {{ selectCarData.gearbox }} {{ selectCarData.version }}</div>
                  </div>
                </div>
                <div v-if="!selectCarData" @click="goVin" class="addcarContR">
                  添加爱车
                </div>
                <div v-if="selectCarData" @click="goMyloveCar" class="addcarContR">
                  我的爱车
                </div>
              </div>
            </div>
            <div class="btnGroupBox">
              <img src="../assets/images/carImg/btnGroupBg.png" class="btnGroupBg" />
              <div class="btnGroupWarp">
                <!-- <div class="btnGroupItem">
                <img src="../assets/images/carImg/jifen.png" class="btnGroupIcon"/>
                <div class="btnGroupText">积分商城</div>
              </div> -->
                <div class="btnGroupItem" @click="goclassify(10)">
                  <img src="../assets/images/carImg/yuyue.png" class="btnGroupIcon" />
                  <div class="btnGroupText">预购</div>
                </div>
                <div class="btnGroupItem" @click="goTaocan">
                  <img src="../assets/images/carImg/huodong.png" class="btnGroupIcon" />
                  <div class="btnGroupText">活动套餐</div>
                </div>
                <div class="btnGroupItem" @click="goclassify(6)">
                  <img src="../assets/images/carImg/jiayouzhan.png" class="btnGroupIcon" />
                  <div class="btnGroupText">加油站</div>
                </div>
                <div class="btnGroupItem" @click="goclassify(8)">
                  <img src="../assets/images/carImg/jiuyuan.png" class="btnGroupIcon" />
                  <div class="btnGroupText">救援服务</div>
                </div>
                <div class="btnGroupItem" @click="goclassify(9)">
                  <img src="../assets/images/carImg/jifen.png" class="btnGroupIcon" />
                  <div class="btnGroupText">积分商城</div>
                </div>
              </div>
            </div>
            <div class="search-car-box" v-if="carInfo">
              <div class="storeName">
                品牌：<span>{{ carInfo.brand }}</span>
              </div>
              <div class="storeName">
                VIN：<span>{{ carInfo.vin }}</span>
              </div>
            </div>
            <div class="listBox">
              <div class="listTitle">
                <img src="../assets/images/carImg/jingxuan.png" class="jingxuan" />
                精选推荐
              </div>
              <div class="listWarp">
                <template v-if="goodsList.length != 0">
                  <div v-for="(item, index) in goodsList" :key="item.id" class="listItem" @click="godetails(item.id)"
                    :style="index % 2 == 1 ? 'float:right' : ''">
                    <img :src="item.thumb" class="goodsImg" />
                    <div class="goodsName">
                      {{ item.title }}
                    </div>
                    <!-- <div class="goodscouponbox">
                    <div class="goodscouponItem1">
                      <div class="goodscouponItem1L">领劵</div>
                      <div class="goodscouponItem1R">满200减10</div>
                    </div>
                    <div class="goodscouponItem2">
                      限时抢
                    </div>
                  </div> -->
                    <div class="goodsprice">
                      <div style="float: left;">
                        <span class="goodspriceFH">¥</span>
                        {{ item.price }}
                      </div>
                      <!-- <div style="float: left;color: #666666;font-size:0.5rem;line-height: 0.75rem;margin-left:0.5rem;">
                      <span class="goodspriceFH">¥</span>
                      {{ item.price }}
                    </div> -->
                    </div>
                    <div class="storeName">
                      销量：<span>{{ item.total_sales ? item.total_sales : '0' }}</span>
                    </div>
                    <div class="storeName">
                      库存：<span>{{ item.stock ? item.stock : '-' }}</span>
                    </div>
                    <div class="storeName">
                      适用车型：
                      <template v-if="item.practicalityCarModel && item.practicalityCarModel.length != 0">
                        <span v-for="(ite, index) in item.practicalityCarModel" style="color: #f15353;">
                          {{ ite.car_model_name + ite.remark }}<span
                            v-if="index != item.practicalityCarModel.length - 1"> |
                          </span>
                        </span>
                      </template>
                      <template v-else>-</template>
                    </div>
                    <div class="storeName">
                      保质期：<span>{{ item.shelf_life ? item.shelf_life : '-' }}</span>
                    </div>
                    <div class="storeName" style="overflow: inherit;">
                      所属分类：<span v-for="(category, categoryIndex) in item.goods_category" :key="categoryIndex">{{
                        category.name || '-'
                      }}<span v-if="item.goods_category.length - 1 !== categoryIndex">,</span></span>
                    </div>
                    <div class="storeName">
                      品牌：<span>{{ item.brand || '-' }}</span>
                    </div>
                    <!-- <div class="storeName" style="margin-bottom:0.5rem;">
                    服务费：¥{{ item.service_charge?item.service_charge.region_service_charge:'' }}
                  </div> -->
                    <div class="storeName" style="margin-bottom:0.5rem;">
                      店铺：{{ item.store_name ? item.store_name : '平台自营' }}
                    </div>
                  </div>
                </template>
                <div v-if="showNodata && goodsList.length == 0" class="zlnodata">
                  <img src="../assets/images/carImg/zlnodata.png" class="nodata" />
                  <div class="text">暂无数据</div>
                </div>
              </div>
            </div>
            <div v-if="nomore" class="">暂无更多商品~</div>
          </div>
        </van-pull-refresh>
      </div>
    </div>
    <U_foot :id="id + '1'" v-if="bottom_info" :diydatas="bottom_info"></U_foot>
    <van-popup class="addcarpopupBox" v-model="showPopup">
      <div class="addcarpopup">
        <img src="../assets/images/carImg/addcarpopupclose.png" @click="closePopup" class="addcarpopupclose" />
        <img src="../assets/images/carImg/carImg.png" class="carTubiao" />
        <div class="addcarpopuptext-1">填写车架号</div>
        <div class="addcarpopuptext-2">诚达商品根据车架号匹配产品</div>
        <div class="addcarpopupbtn" @click="goVin">添加车架号</div>
        <div class="addcarpopuptext-4"><img src="../assets/images/carImg/xiayiIcon.png"
            class="xieyiIcon" />车型信息仅用于商品匹配，见<span style="color:#2A87FF;">《隐私保护协议》</span></div>
      </div>
    </van-popup>
    <van-popup class="vinpopupBox" v-model="showvinpopup">
      <div class="vinpopup">
        <div class="title">添加车架号</div>
        <div class="vininputbox">
          <div class="vininputboxL">
            <van-field v-model="vinvalue" maxlength="17" placeholder="请输入17位VIN车架号" class="vininput" />
          </div>
          <div class="vininputboxR">
            <img src="../assets/images/carImg/saoyisao.png" class="saoyisao" @click="opWithPermission" />
            <input v-if="showInputFile" type="file" accept="image/*" ref="imgFile" id="fileInput" class="cameraInput"
              name="file" @change="handleCamera($event)" />
          </div>
        </div>
        <div class="vinbtnbox">
          <div class="vinbtnstyle" style="color: #333;border-right: 1px solid #f0f0f0;" @click="cancelvinpopup">取消</div>
          <div class="vinbtnstyle" @click="goPerfectCar">确定</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showCityPopup" position="bottom" :style="{ height: '60%' }">
      <van-picker :loading="loading" visible-item-count="10" show-toolbar title="标题" :columns="columns"
        @cancel="citycancel" @confirm="cityconfirm" @change="onChange" />
    </van-popup>
  </div>
</template>

<script>
import {
  Toast
} from 'vant';
export default {
  data() {
    return {
      showInputFile: false,
      loading: true,
      showPopup: false,
      showvinpopup: false,
      showCityPopup: false,
      bottom_info: "",
      vinvalue: '',
      selectCarData: null,
      provinceData: null,
      cityData: null,
      districtData: null,
      streetData: null,
      address: '请选择',
      city: '',
      columns: [
        {
          values: []
        },
        {
          values: []
        },
        {
          values: []
        },
        {
          values: []
        }
      ],
      columnsvalues: null,
      columnsindex: null,
      search: {
        address: '',
        // province_id:'',
        // city_id:'',
        district_id: '',
        street_id: '',
        store_id: '',
        keyword: '',
        car_brand_id: '',
        car_brand_name: '',
        car_series_id: '',
        car_series_name: '',
        car_model_id: '',
        car_model_name: ''
      },
      goodsList: [],
      vinType: 'addCar',
      scrollOnoff: true,
      contHeight: null,
      page: 1,
      total: null,
      showNodata: false,
      nomore: false,
      carInfo: null,
      isLoading: true
    };
  },
  mounted() {
    // this.getProvince()
    this.initPage();
    this.getTemp()
  },
  activated() {
    this.initPage();
  },
  deactivated() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    //刷新
    loadTop() {
      console.log("下拉刷新");
      this.initPage();
      this.isLoading = false
    },
    initPage() {
      this.nomore = false
      this.vinvalue = ''
      this.search.keyword = ''
      this.showvinpopup = false
      this.goodsList = []
      this.scrollOnoff = true
      this.contHeight = null
      this.showNodata = false
      this.page = 1
      this.total = null
      if (window.localStorage.getItem('filePower')) {
        this.showInputFile = true
      } else {
        this.showInputFile = false
      }

      let showPrivacyAgreement = localStorage.getItem('showPrivacyAgreement');
      if (showPrivacyAgreement === 'false') {
        let myLocation = JSON.parse(localStorage.getItem("myLocation"));
        if (myLocation && myLocation.timestamp) {
          //解决定位选择“全国”后返回或者跳转其他页面返回又重新定位当前
          this.city = myLocation.city;
          this.address = myLocation.title;
          this.point = myLocation.point;
          this.search.district_id = myLocation.addressComponent.adcode
          this.search.street_id = myLocation.addressComponent.towncode || ''
          if (window.sessionStorage.getItem('indexstoreItem')) {
            // this.search.store_id = JSON.parse(window.sessionStorage.getItem('indexstoreItem')).id
            if (window.localStorage.getItem('defaultCarData')) {
              this.selectCarData = JSON.parse(window.localStorage.getItem('defaultCarData'))
              this.search.car_brand_name = this.selectCarData.brand_name
              this.search.car_series_name = this.selectCarData.series_name
              this.showPopup = false
              this.getGoodsList()
            } else {
              this.selectCarData = null
              if (window.localStorage.getItem('member_id')) {
                this.getcarList()
              } else {
                if (!window.sessionStorage.getItem('closeFirstPopup')) {
                  this.showPopup = true
                }
                this.getGoodsList()
              }
            }
          } else {
            this.getStorePage();
          }
        } else {
          this.fun
            .getLocation("正在定位")
            .then(res => {
              this.city = res.city;
              this.address = res.title;
              this.point = res.point;
              this.search.district_id = myLocation.addressComponent.adcode
              this.search.street_id = myLocation.addressComponent.towncode || ''
              if (window.sessionStorage.getItem('indexstoreItem')) {
                // this.search.store_id = JSON.parse(window.sessionStorage.getItem('indexstoreItem')).id
                if (window.localStorage.getItem('defaultCarData')) {
                  this.selectCarData = JSON.parse(window.localStorage.getItem('defaultCarData'))
                  this.search.car_brand_name = this.selectCarData.brand_name
                  this.search.car_series_name = this.selectCarData.series_name
                  this.showPopup = false
                  this.getGoodsList()
                } else {
                  this.selectCarData = null
                  if (window.localStorage.getItem('member_id')) {
                    this.getcarList()
                  } else {
                    if (!window.sessionStorage.getItem('closeFirstPopup')) {
                      this.showPopup = true
                    }
                    this.getGoodsList()
                  }
                }
              } else {
                this.getStorePage();
              }
            })
            .catch(err => {
              // if(window.sessionStorage.getItem('indexstoreItem')){
              //   this.search.store_id = JSON.parse(window.sessionStorage.getItem('indexstoreItem')).id
              // }
              if (window.localStorage.getItem('defaultCarData')) {
                this.selectCarData = JSON.parse(window.localStorage.getItem('defaultCarData'))
                this.search.car_brand_name = this.selectCarData.brand_name
                this.search.car_series_name = this.selectCarData.series_name
                this.showPopup = false
                this.getGoodsList()
              } else {
                this.selectCarData = null
                if (window.localStorage.getItem('member_id')) {
                  this.getcarList()
                } else {
                  if (!window.sessionStorage.getItem('closeFirstPopup')) {
                    this.showPopup = true
                  }
                  this.getGoodsList()
                }
              }
              // console.log(err);
            });
        }
      }

      window.addEventListener("scroll", this.handleScroll);
    },
    getStorePage() {
      this.page = 1;
      let p = this.fun.bd_encrypt(this.point.lng, this.point.lat);
      if (!this.point.lng) {
        p.lng = "";
        p.lat = "";
      }
      $http
        .get(
          "plugin.store-cashier.frontend.store.store.get-store-page",
          {
            kwd: "",
            lng: p.lng,
            lat: p.lat,
            city_name: this.city,
            page: this.page
          },
        )
        .then(
          response => {
            if (response.result === 1) {
              if (response.data.store_list.data.length != 0) {
                // this.search.store_id = response.data.store_list.data[0].id
                if (window.localStorage.getItem('defaultCarData')) {
                  this.selectCarData = JSON.parse(window.localStorage.getItem('defaultCarData'))
                  this.search.car_brand_name = this.selectCarData.brand_name
                  this.search.car_series_name = this.selectCarData.series_name
                  this.showPopup = false
                  this.getGoodsList()
                } else {
                  this.selectCarData = null
                  if (window.localStorage.getItem('member_id')) {
                    this.getcarList()
                  } else {
                    if (!window.sessionStorage.getItem('closeFirstPopup')) {
                      this.showPopup = true
                    }
                    this.getGoodsList()
                  }
                }
              } else {
                if (window.localStorage.getItem('defaultCarData')) {
                  this.selectCarData = JSON.parse(window.localStorage.getItem('defaultCarData'))
                  this.search.car_brand_name = this.selectCarData.brand_name
                  this.search.car_series_name = this.selectCarData.series_name
                  this.showPopup = false
                  this.getGoodsList()
                } else {
                  this.selectCarData = null
                  if (window.localStorage.getItem('member_id')) {
                    this.getcarList()
                  } else {
                    if (!window.sessionStorage.getItem('closeFirstPopup')) {
                      this.showPopup = true
                    }
                    this.getGoodsList()
                  }
                }
              }
            }
          }
        )
        .catch(err => {
          // console.log(err);
        });
    },
    tolocation() {
      this.$router.push(this.fun.getUrl("o2oHome", {}, { form: 'index' }));
    },
    handleScroll() {
      if (!this.scrollOnoff) {
        return false
      }
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      let viewportHeight = window.innerHeight;
      // console.log(parseInt(this.contHeight - (scrollTop + viewportHeight)))
      if (this.contHeight && (parseInt(this.contHeight - (scrollTop + viewportHeight))) == 0) {
        if (this.total && this.total == this.goodsList.length) {
          // Toast('没有更多的商品啦！');
          this.nomore = true
          return false
        }
        this.scrollOnoff = false
        this.page += 1
        this.getGoodsList()
      }
    },
    goTaocan() {
      this.$router.push(this.fun.getUrl("packageList"));
    },
    goclassify(page_id) {
      this.$router.push(this.fun.getUrl("newDiy", {}, { page_id: page_id, i: 1 }));
    },
    godetails(id) {
      this.$router.push(this.fun.getUrl("goods", { id: id }));
    },
    searchVin() {
      this.vinType = 'search'
      this.showvinpopup = true
    },
    encodeBase64(data) {
      return encodeURIComponent(data);
    },
    pictCallback(ret) {
      const list = ret.list;
      for (let i in list) {
        if (list[i].name == 'camera') {
          if (list[i].granted == 'true' || list[i].granted == true) {
            this.showInputFile = true
            window.localStorage.setItem('filePower', true)
          }
        }
      }
    },
    apialert(_msg, callback) {
      api.alert({
        title: '提示',
        msg: _msg,
      }, function (ret, err) {
        if (callback) {
          callback();
        }
      });
    },
    opWithPermission() {
      const _this = this
      if (!_this.confirmPer('camera')) {
        return;
      }
      api.getPicture({
        sourceType: 'camera',
        mediaValue: 'pic',
        destinationType: 'url',
      }, function (ret, err) {
        if (ret) {
          _this.apialert(JSON.stringify(ret));
        } else {
          _this.apialert(JSON.stringify(err));
        }
      });
    },
    confirmPer(perm) {
      const _this = this
      const has = _this.hasPermission(perm);
      if (!has || !has[0] || !has[0].granted) {
        api.confirm({
          title: '提醒',
          msg: '没有获得 ' + perm + " 权限\n是否前往设置？",
          buttons: ['去设置', '取消']
        }, function (ret, err) {
          if (1 == ret.buttonIndex) {
            _this.reqPermission(perm, _this.pictCallback);
          }
        });
        return false;
      }
      return true;
    },
    hasPermission(one_per) {
      const _this = this
      const perms = new Array();
      perms.push(one_per);
      const rets = api.hasPermission({
        list: perms
      });
      if (!one_per) {
        console.log('判断结果：' + JSON.stringify(rets));
        return;
      }
      return rets;
    },
    reqPermission(one_per, callback) {
      const _this = this
      const perms = new Array();
      if (one_per) {
        perms.push(one_per);
      }
      api.requestPermission({
        list: perms,
        code: 100001
      }, function (ret, err) {
        if (callback) {
          callback(ret);
          return;
        }
        var str = '请求结果：\n';
        str += '请求码: ' + ret.code + '\n';
        str += "是否勾选\"不再询问\"按钮: " + (ret.never ? '是' : '否') + '\n';
        str += '请求结果: \n';
        var list = ret.list;
        for (var i in list) {
          str += list[i].name + '=' + list[i].granted + '\n';
        }
        _this.apialert(str);
        console.log(JSON.stringify(ret));
      });
    },

    getGoodsList() {
      let url = "goods.goods.searchGoods";
      let json = { search: this.search, page: this.page };
      $http.post(url, json, 'loading').then(response => {
        console.log(response)
        if (response.result == 1) {
          this.goodsList = this.goodsList.concat(response.data.data)
          this.total = response.data.total
          this.$nextTick(() => {
            const element = this.$refs.cont;
            const height = element.offsetHeight; // 或者使用其他的属性，如clientHeight、scrollHeight等
            console.log('Element height:', height);
            this.contHeight = height
            this.scrollOnoff = true
            this.showNodata = true
            if (this.total == this.goodsList.length) {
              this.nomore = true
            }
          })
        } else {
          this.showNodata = true
          // Toast(response.msg);
        }
      })
    },
    keywordsearch() {
      this.goodsList = []
      this.scrollOnoff = true
      this.contHeight = null
      this.page = 1
      this.total = null
      this.showNodata = false
      this.getGoodsList()
      if (this.search.keyword) {
        this.setSearchJiLu()
      }

    },
    citycancel() {
      this.showCityPopup = false
    },
    setSearchJiLu() {
      //const userData = JSON.parse(window.localStorage.getItem("member_info"));
      let url = "car.addSearchLog";
      let json = { member_id: window.localStorage.getItem('uid'), 'member_name': '', 'search_key': this.search.keyword };
      $http.post(url, json, "loading").then(response => {
        console.log(response)
        if (response.result == 1) {

        } else {
          Toast(response.msg);
        }
      })
    },
    onChange(picker, values, index) {
      // console.log(picker, values,index)
      this.columnsvalues = values
      this.columnsindex = index
      if (index == 0) {
        this.provinceData.forEach((item) => {
          if (item.areaname == values[index]) {
            this.getCity(item.id)
          }
        })
      }
      if (index == 1) {
        this.cityData.forEach((item) => {
          if (item.areaname == values[index]) {
            this.getDistrict(item.id)
          }
        })
      }
      if (index == 2) {
        this.districtData.forEach((item) => {
          if (item.areaname == values[index]) {
            this.getStreet(item.id)
          }
        })
      }
    },
    getcarList() {
      let url = "car.personalCarList";
      let json = { member_id: window.localStorage.getItem('member_id') };
      $http.post(url, json, "loading").then(response => {
        // console.log(response)
        if (response.result == 1) {
          if (response.data && response.data.length != 0) {
            response.data.forEach((item) => {
              if (item.is_default == 1) {
                this.selectCarData = item
                this.search.car_brand_name = this.selectCarData.brand_name
                this.search.car_series_name = this.selectCarData.series_name
                window.localStorage.setItem('defaultCarData', JSON.stringify(item));
                this.getGoodsList()
              }
            })
          } else {
            if (!window.sessionStorage.getItem('closeFirstPopup')) {
              this.showPopup = true
            }
            this.getGoodsList()
          }
        } else {
          Toast(response.msg);
        }
      })
    },
    goMyloveCar() {
      this.$router.push(this.fun.getUrl('myloveCar', {}, {}));
    },
    getProvince() {
      let url = "member-address.get-address";
      let json = { type: 'province' };
      $http.post(url, json).then(response => {
        // console.log(response)
        if (response.result == 1) {
          this.provinceData = response.data
          response.data.forEach((item, index) => {
            this.columns[0].values.push(item.areaname)
            if (index == 0) {
              this.getCity(item.id)
            }
          })
          // console.log(this.columns)
        } else {
          Toast(response.msg);
        }
      })
    },
    selectCity() {
      this.showCityPopup = true
    },
    getCity(id) {
      let url = "member-address.get-address";
      let json = { type: 'city', parentid: id };
      $http.post(url, json).then(response => {
        // console.log(response)
        if (response.result == 1) {
          this.cityData = response.data
          this.columns[1].values = []
          this.columns[1].values.push('请选择')
          response.data.forEach((item, index) => {
            this.columns[1].values.push(item.areaname)
            if (index == 0) {
              this.getDistrict(item.id)
            }
          })
        } else {
          Toast(response.msg);
        }
      })
    },
    getDistrict(id) {
      let url = "member-address.get-address";
      let json = { type: 'district', parentid: id };
      $http.post(url, json).then(response => {
        // console.log(response)
        if (response.result == 1) {
          this.districtData = response.data
          this.columns[2].values = []
          this.columns[2].values.push('请选择')
          response.data.forEach((item, index) => {
            this.columns[2].values.push(item.areaname)
            if (index == 0) {
              this.getStreet(item.id)
            }
          })
        } else {
          Toast(response.msg);
        }
      })
    },
    getStreet(id) {
      let url = "member-address.get-address";
      let json = { type: 'street', parentid: id };
      $http.post(url, json).then(response => {
        // console.log(response)
        if (response.result == 1) {
          this.streetData = response.data
          this.columns[3].values = []
          this.columns[3].values.push('请选择')
          response.data.forEach((item, index) => {
            this.columns[3].values.push(item.areaname)
          })
          this.loading = false
        } else {
          Toast(response.msg);
        }
      })
    },
    // goPosition(){
    //   this.$router.push(this.fun.getUrl('o2oLocation',{},{formTag:'back'}));
    // },
    handleCamera(event) {
      const _this = this
      const reader = new FileReader();
      // 文件读取完毕后的处理函数
      reader.onload = function (event) {
        const base64 = event.target.result;
        _this.getCarOcr(base64)
      };
      reader.readAsDataURL(event.target.files[0]);
    },
    getCarOcr(imgdata) {
      let base64Arr = imgdata.split(',')
      let url = "car.vinOcr";
      let json = { image_base64: this.encodeBase64(base64Arr[1]) };
      $http.post(url, json, "loading").then(response => {
        // console.log(response)
        if (response.result == 1) {
          document.getElementById('fileInput').value = '';
          this.vinvalue = response.data.vin
        } else {
          document.getElementById('fileInput').value = '';
          Toast(response.msg);
        }
      })
    },
    goVin() {
      if (!window.localStorage.getItem('member_id')) {
        this.$router.push(this.fun.getUrl("login", {}, { backNumber: -1 }));
        return false
      }
      this.vinType = 'addCar'
      this.showPopup = false
      this.showvinpopup = true
    },
    cancelvinpopup() {
      this.vinvalue = ''
      this.showvinpopup = false
    },
    closePopup() {
      this.showPopup = false
      window.sessionStorage.setItem('closeFirstPopup', true)
    },
    goPerfectCar() {
      // console.log(this.vinvalue)
      if (!this.vinvalue) {
        Toast('请填写车架号');
        return false
      }
      let url = "car.vinQuery";
      let json = { vin: this.vinvalue };
      $http.post(url, json, "loading").then(response => {
        // console.log(response)
        if (response.result == 1) {
          this.carInfo = response.data
          if (this.vinType == 'search') {
            this.search.car_brand_name = response.data.brand
            this.search.car_series_name = response.data.typename
            this.showvinpopup = false
            this.vinvalue = ''
            this.goodsList = []
            this.scrollOnoff = true
            this.contHeight = null
            this.page = 1
            this.total = null
            this.showNodata = false
            this.getGoodsList()
          } else {
            window.sessionStorage.setItem('carData', JSON.stringify(response.data));
            this.showvinpopup = false
            this.$router.push(this.fun.getUrl('perfectCar'))
          }
        } else {
          Toast(response.msg);
        }
      })
    },
    getTemp() {
      this.showPage = false;
      let url = "home-page.index";
      let json = { page_id: this.fun.getKey("page_id") };
      this.is_store = false;
      if (this.fun.getKey("store_id")) {
        this.store_id = this.fun.getKey("store_id");
        this.is_store = true;
        url = "plugin.store-cashier.frontend.store.get-store-info.get-the-provider";
        json = { page_id: this.fun.getKey("page_id"), store_id: this.fun.getKey("store_id") };
      }
      $http.get(url, json, "loading").then(
        response => {
          if (!response) return;
          if (this.is_store && response.data.store_decorate && response.data.store_decorate.datas) {
            // 门店的底部有三种情况
            if (response.data.store_decorate.foot_type == -1) {
              // 不显示
              this.bottom_info = "";
            } else if (response.data.store_decorate.foot_type == 1) {
              // 显示默认
              if (!response.data.store_decorate.foot_id) {
                // 显示系统默认
                this.bottom_info = {
                  defaultData: true
                };
              } else {
                // 显示列表设置的默认
                if (response.data.store_decorate.foot_id && response.data.store_decorate.foot_id.page_info) {
                  this.bottom_info = JSON.parse(response.data.store_decorate.foot_id.page_info);
                } else {
                  this.bottom_info = {
                    defaultData: true
                  };
                }
              }
            } else if (response.data.store_decorate.foot_type == 2) {
              // 显示自定义的底部导航
              if (response.data.store_decorate.foot_id instanceof Array) {
                this.bottom_info = {};
              } else {
                this.bottom_info = JSON.parse(response.data.store_decorate.foot_id.page_info);
              }
            }

            return;
          }

          if (response.data.item) {
            if (this.fun.isCPS() && this.fun.isCPSAPPI() && response.data.item.cps_foot_type) {
              // 聚合APP装修的底部有三种情况
              if (response.data.item.cps_foot_type == -1) {
                // 不显示
                this.bottom_info = "";
              } else if (response.data.item.cps_foot_type == 1) {
                // 显示默认
                if (!response.data.item.foot) {
                  // 显示系统默认
                  this.bottom_info = {
                    defaultData: true
                  };
                } else {
                  // 显示列表设置的默认
                  if (response.data.item.foot && response.data.item.foot.page_info) {
                    this.bottom_info = JSON.parse(response.data.item.foot.page_info);
                  } else {
                    this.bottom_info = {
                      defaultData: true
                    };
                  }
                }
              } else if (response.data.item.cps_foot_type == 2) {
                // 显示自定义的底部导航
                if (response.data.item.foot instanceof Array) {
                  this.bottom_info = {};
                } else {
                  this.bottom_info = JSON.parse(response.data.item.foot.page_info);
                }
              }
            } else {
              // 首页装修的底部有三种情况
              if (response.data.item.foot_type == -1) {
                // 不显示
                this.bottom_info = "";
              } else if (response.data.item.foot_type == 1) {
                // 显示默认
                if (!response.data.item.foot) {
                  // 显示系统默认
                  this.bottom_info = {
                    defaultData: true
                  };
                } else {
                  // 显示列表设置的默认
                  if (response.data.item.foot && response.data.item.foot.page_info) {
                    this.bottom_info = JSON.parse(response.data.item.foot.page_info);
                  } else {
                    this.bottom_info = {
                      defaultData: true
                    };
                  }
                }
              } else if (response.data.item.foot_type == 2) {
                // 显示自定义的底部导航
                if (response.data.item.foot instanceof Array) {
                  this.bottom_info = {};
                } else {
                  this.bottom_info = JSON.parse(response.data.item.foot.page_info);
                }
              }
            }
            console.log(this.bottom_info, '-------------this.bottom_info')
          }
          window.localStorage.setItem("bottom_info", JSON.stringify(this.bottom_info));
          // console.log(this.bottom_info,'---------------------this.bottom_info')
        },
        response => {
          // console.log(response);
        }
      );
    },
  },
  components: {
    U_foot: () => import("../components/new_diy/foot.vue"),
    U_location: () => import("../components/new_diy/location.vue")
  }
};

</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.HomeWarp {
  width: 100%;
  min-height: calc(100vh - 50px);
  background: #F6F4F3;
  // overflow-y: auto;
  position: relative;

  .homeBgstyle {
    width: 100%;
    height: auto;
  }

  .contBox {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;

    .contTop {
      width: 100%;
      height: 2.8rem;
      // height: 5.5rem;
      // padding: 0 3.2%;
      box-sizing: border-box;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 10;
      overflow: hidden;

      .contTopCont {
        width: 100%;
        position: absolute;
        left: 0;
        top: 0;
        padding: 0 3.2%;
        display: flex;
      }

      .positionBox {
        width: 100%;
        height: 2.75rem;

        .positionText {
          float: left;
          font-weight: 500;
          font-size: 0.875rem;
          color: #333333;
          line-height: 2.75rem;
          text-align: left;
        }

        .positionIcon {
          display: inline-block;
          width: 1rem;
          height: 1rem;
          vertical-align: middle;
          margin-left: 0.25rem;
        }
      }

      .search_box {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 100px;

        .search {
          height: 2.75rem;
          line-height: 2.75rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          // padding: 0 0.875rem;
          // background-color: #fff;

          .left {
            width: 100%;
            font-size: 15px;
            display: flex;

            i {
              color: #333;
              font-size: 1rem;
            }

            span {
              display: block;
              margin: 0 0.25rem;
              // max-width: 3.75rem;
              max-width: 100%;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              color: #333;
            }

            i:last-child {
              font-size: 1.125rem;
            }
          }

          .right {
            width: 14.375rem;
            height: 1.875rem;
            background: #f5f5f5;
            display: flex;
            line-height: 1.875rem;
            border-radius: 1rem;
            padding: 0 0.625rem;
            font-size: 14px;

            i {
              font-size: 1.125rem;
              color: #999;
              margin-right: 0.375rem;
            }

            input {
              border: none;
              width: 100%;
            }
          }
        }
      }

      .searchBox {
        width: 100%;
        height: 2.75rem;
        padding: 0.375rem 0;

        .searchStyle {
          width: 100%;
          height: 2rem;
          position: relative;

          .searchBg {
            display: block;
            width: 100%;
            height: 2rem;
          }

          .searchCont {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;

            .searchIcon {
              width: 1rem;
              height: 1rem;
              float: left;
              margin-left: 0.75rem;
              margin-top: 0.5rem;
            }

            .searchInputBox {
              width: auto;
              height: 2rem;
              margin: 0 3.35rem 0 2rem;

              .searchInput {
                padding: 0;
                background: none;

                ::v-deep .van-search__content {
                  padding-left: 0;
                  background: none;
                }

                ::v-deep .van-cell {
                  padding: 0;
                  background: none;
                  line-height: 2rem;
                }

                ::v-deep .van-field__left-icon {
                  display: none;
                }

                ::v-deep .van-field__control {
                  font-size: 0.75rem;
                  color: #666;
                }
              }

            }

            .searchBtnBox {
              width: 2.75rem;
              height: 1.25rem;
              position: absolute;
              top: 0.375rem;
              right: 0;
              border-left: 1px solid #BFBFBF;
              box-sizing: border-box;

              .saoyisao {
                width: 1.25rem;
                height: 1.25rem;
                position: relative;
                left: -0.125rem;
              }
            }
          }
        }
      }
    }

    .cont {
      width: 100%;
      // height: calc( 100vh - 5.5rem - 50px );
      // padding: 5.5rem 3.2% 60px;
      padding: 2.8rem 3.2% 60px;
      box-sizing: border-box;

      // overflow-y: auto;
      .addCarBox {
        width: 100%;
        height: 4.25rem;
        margin-top: 0.25rem;
        position: relative;

        .addcarbg {
          display: block;
          width: 100%;
          height: 100%;
        }

        .addcarCont {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          padding: 0.875rem 0.75rem;
          box-sizing: border-box;

          .addcarContL {
            margin-right: 6rem;

            .addcarContLText1 {
              font-weight: 600;
              font-size: 1rem;
              color: #333333;
              line-height: 1.375rem;
              text-align: left;
            }

            .addcarContLText2 {
              height: 0.875rem;
              margin-top: 0.25rem;

              .addcarContLText2-item {
                float: left;
                margin-right: 0.25rem;
                font-weight: 400;
                font-size: 0.625rem;
                color: #FF6B69;
                line-height: 0.875rem;
                text-align: left;

                .addcaricon {
                  width: 0.5rem;
                  height: 0.5rem;
                  display: inline-block;
                  margin-right: 2px;
                }
              }
            }
          }

          .addcarContR {
            width: 4.75rem;
            height: 1.75rem;
            background: #FB1622;
            border-radius: 0.875rem;
            position: absolute;
            top: 1.25rem;
            right: 0.75rem;
            font-weight: 400;
            font-size: 0.75rem;
            color: #FFFFFF;
            line-height: 1.75rem;
            text-align: center;
          }
        }
      }

      .btnGroupBox {
        width: 100%;
        height: 6.625rem;
        margin-top: 0.75rem;
        position: relative;

        .btnGroupBg {
          width: 100%;
          height: 100%;
        }

        .btnGroupWarp {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;

          .btnGroupItem {
            width: 20%;
            height: 100%;
            float: left;

            .btnGroupIcon {
              width: 2.875rem;
              height: 2.875rem;
              display: block;
              margin: 1rem auto 0.5rem;
            }

            .btnGroupText {
              font-weight: 400;
              font-size: 0.875rem;
              color: #333333;
              line-height: 1.25rem;
              text-align: center;
            }
          }
        }
      }

      .listBox {
        margin-top: 1.5625rem;

        .listTitle {
          width: 100%;
          height: 1.375rem;
          font-weight: 600;
          font-size: 1rem;
          color: #333333;
          line-height: 1.375rem;
          text-align: left;

          .jingxuan {
            width: 1.25rem;
            height: 1.25rem;
            vertical-align: middle;
            position: relative;
            top: -2px;
          }
        }

        .listWarp {
          width: 100%;
          height: auto;
          overflow: hidden;
          margin-top: 0.75rem;

          .zlnodata {
            width: 118px;
            height: auto;
            margin: 50px auto 0;

            .nodata {
              width: 100%;
              display: block;
            }

            .text {
              font-size: 0.875rem;
              line-height: 2rem;
              color: #333;
              text-align: center;
            }
          }

          .listItem {
            width: 49.2%;
            height: auto;
            border-radius: 0.3rem;
            overflow: hidden;
            margin-bottom: 0.4rem;
            background: #fff;
            float: left;

            .goodsImg {
              width: 10.625rem;
              height: 10.625rem;
              display: block;
            }

            .goodsName {
              height: 2.25rem;
              width: 100%;
              padding: 0 0.5rem;
              margin-top: 0.5rem;
              font-weight: 500;
              font-size: 0.875rem;
              color: #212121;
              line-height: 1.125rem;
              text-align: left;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 定义文本的行数 */
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .storeName {
              font-size: 0.75rem;
              text-align: left;
              padding: 0 0.5rem;
              margin-bottom: 0.1rem;
              text-overflow: ellipsis;
              overflow: hidden;
              white-space: nowrap;
            }

            .goodscouponbox {
              width: 100%;
              height: 0.875rem;
              padding: 0 0.5rem;
              margin-top: 0.25rem;

              .goodscouponItem1 {
                width: 4.375rem;
                height: 0.875rem;
                border-radius: 0.125rem;
                border: 1px solid #FB1622;
                margin-right: 0.25rem;
                float: left;

                .goodscouponItem1L {
                  width: 1.375rem;
                  height: 100%;
                  float: left;
                  font-size: 0.5rem;
                  text-align: center;
                  line-height: 0.875rem;
                  color: #FB1622;
                  background: #FFE8E6;
                  border-right: 1px dashed #FB1622;
                }

                .goodscouponItem1R {
                  width: auto;
                  height: 100%;
                  margin-left: 1.375rem;
                  font-size: 0.5rem;
                  text-align: center;
                  line-height: 0.875rem;
                  color: #FB1622;
                }
              }

              .goodscouponItem2 {
                width: 2.125rem;
                height: 0.875rem;
                border-radius: 0.125rem;
                background: #FFE8E6;
                font-size: 0.5rem;
                text-align: center;
                line-height: 0.875rem;
                color: #FB1622;
                float: left;
              }
            }

            .goodsprice {
              width: 100%;
              padding: 0 0.5rem;
              margin-top: 0.1rem;
              margin-bottom: 0.1rem;
              font-weight: 600;
              font-size: 0.875rem;
              color: #FB1622;
              // line-height: 1.125rem;
              text-align: left;
              overflow: hidden;

              .goodspriceFH {
                font-size: 0.5rem;
              }
            }
          }
        }
      }
    }

    .iphoneXStyle {
      padding-bottom: 94px;
    }
  }

}

.addcarpopupBox {
  width: 80.8%;
  height: 18.375rem;
  border-radius: 0.5rem;
  overflow: inherit;

  ::v-deep .addcarpopup {
    width: 100%;
    height: 100%;
    padding-top: 2.5rem;
    box-sizing: border-box;
    position: relative;

    .addcarpopupclose {
      width: 2rem;
      height: 2rem;
      position: absolute;
      left: 50%;
      bottom: -3.5rem;
      margin-left: -1rem;
    }

    .carTubiao {
      width: 16rem;
      height: 4.5rem;
      display: block;
      margin: 0 auto 0;
    }

    .addcarpopuptext-1 {
      font-weight: 400;
      font-size: 0.75rem;
      color: #333333;
      line-height: 1.125rem;
      text-align: center;
      margin-top: 1.5rem;
    }

    .addcarpopuptext-2 {
      font-weight: 400;
      font-size: 0.75rem;
      color: #333333;
      line-height: 1.125rem;
      text-align: center;
      margin-top: 0.75rem;
    }

    .addcarpopupbtn {
      width: 16.5rem;
      height: 2.5rem;
      background: #FB1622;
      border-radius: 0.5rem;
      margin: 1.5rem auto 0;
      font-weight: 500;
      font-size: 0.875rem;
      color: #FFFFFF;
      line-height: 2.5rem;
      text-align: center;
    }

    .addcarpopuptext-4 {
      font-weight: 400;
      font-size: 0.75rem;
      color: #666666;
      line-height: 1.125rem;
      text-align: center;
      margin-top: 0.625rem;

      .xieyiIcon {
        width: 0.875rem;
        height: 0.875rem;
        display: inline-block;
        vertical-align: middle;
        position: relative;
        top: -1px;
      }
    }
  }

  ::v-deep .vinpopup {}
}

.vinpopupBox {
  width: 80.8%;
  height: 11.5rem;
  border-radius: 0.5rem;

  .vinpopup {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;

    .title {
      font-weight: 500;
      font-size: 1rem;
      color: #1F2329;
      line-height: 1.375rem;
      text-align: center;
      margin-top: 1.5rem;
    }

    .vininputbox {
      width: 16.5rem;
      height: 2.5rem;
      margin: 1.5rem auto 0;

      .vininputboxL {
        width: 13.4375rem;
        height: 100%;
        border-radius: 4px;
        border: 1px solid #BFBFBF;
        box-sizing: border-box;
        float: left;

        .vininput {
          padding: 0;
          line-height: 2rem;
          margin-top: 0.25rem;
          font-size: 0.875rem;
          padding-left: 0.5rem;
        }
      }

      .vininputboxR {
        width: 2.5rem;
        height: 2.5rem;
        background: #FB1622;
        border-radius: 0.5rem;
        float: right;
        position: relative;

        .saoyisao {
          width: 1.5rem;
          height: 1.5rem;
          display: block;
          margin: 0.5rem auto 0;
        }

        .cameraInput {
          width: 100%;
          height: 100%;
          position: absolute;
          left: 0;
          top: 0;
          z-index: 1;
          font-size: 0;
          opacity: 0;
        }
      }
    }

    .vinbtnbox {
      width: 100%;
      height: 3.125rem;
      position: absolute;
      left: 0;
      bottom: 0;
      border-top: 1px solid #F0F0F0;

      .vinbtnstyle {
        width: 50%;
        height: 100%;
        float: left;
        font-weight: 500;
        font-size: 1rem;
        color: #FB1622;
        line-height: 3.125rem;
        text-align: center;
        box-sizing: border-box;
      }
    }
  }
}

.search-car-box {
  border: 1px solid #FB1622;
  padding: 10px;
  margin-top: 1.5625rem;
  text-align: left;
}
</style>
